<template>
  <div class="modify">
    <van-nav-bar
      title="修改个人信息"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <Logo />
    <van-form @submit="onSubmit">
      <van-field
        v-model="nickName"
        name="nickName"
        label="昵称"
        placeholder="昵称"
        :rules="[{ required: true, message: '请填写昵称' }]"
      />
      <van-field
        v-model="age"
        type="number"
        name="age"
        label="年龄"
        placeholder="年龄"
        :rules="[{ required: true, message: '请填写年龄' }]"
      />
      <van-field name="gender" label="性别">
        <template #input>
          <van-radio-group v-model="gender" direction="horizontal">
            <van-radio name="男">男</van-radio>
            <van-radio name="女">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <!-- 头像 -->
      <van-field name="avatar" label="上传头像">
        <template #input>
          <van-uploader
            v-model="avatar"
            :max-count="1"
            :after-read="afterRead"
          />
        </template>
      </van-field>
      <!-- 生日 -->
      <van-field
        readonly
        clickable
        name="birthday"
        :value="birthday"
        label="生日"
        placeholder="点击选择生日"
        @click="showPicker = true"
      />

      <van-popup v-model="showPicker" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>

      <!-- 地区选择 -->
      <van-field
        readonly
        clickable
        name="area"
        :value="area"
        label="地区选择"
        placeholder="点击选择省市区"
        @click="showArea = true"
      />
      <van-popup v-model="showArea" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onConfirmArea"
          @cancel="showArea = false"
        />
      </van-popup>
      <!-- 详细地址 -->
      <van-field
        v-model="address"
        name="address"
        label="详细地址"
        placeholder="详细地址"
        :rules="[{ required: true, message: '请填写详细地址' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from "vant";
import { areaList } from "@vant/area-data";
import Logo from "../components/Logo.vue";
import { loadUserInfoAPI, modifyInfoAPI } from "../services/auth";
import { uploadFileAPI } from "../services/file";
import { serverUrl } from "../utils/tools";

export default {
  components: {
    Logo,
  },
  data() {
    return {
      nickName: "",
      age: "",
      gender: "",
      avatar: [{ url: "https://img01.yzcdn.cn/vant/leaf.jpg" }],
      birthday: "",
      area: "",
      address: "",
      areaList, // 数据格式见 Area 组件文档
      showArea: false,
      showPicker: false,
      minDate: new Date(1990, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
    };
  },
  async created() {
    // 获取用户信息显示页面
    const res = await loadUserInfoAPI();
    // console.log(res);
    this.nickName = res.data.nickName;
    this.age = res.data.age;
    this.gender = res.data.gender;
    this.birthday = res.data.birthday;
    this.area = res.data.area;
    this.address = res.data.address;
    this.avatar = [{ url: res.data.avatar }];
  },
  methods: {
    // 文件上传，改变文件路径触发
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      //   console.log(file);
      // 上传文件接口
      const fd = new FormData();
      fd.append("file", file.file);
      const resFile = await uploadFileAPI(fd);
      //   console.log(resFile);
      this.avatar = [{ url: serverUrl + resFile.data }];
    },
    // 提交修改信息
    async onSubmit(values) {
      //   console.log("submit", values);
      const infoDate = { ...values, avatar: this.avatar[0].url };
      //   console.log(infoDate);
      const res = await modifyInfoAPI(infoDate);
      if (res.code) {
        // 成功后跳转我的页面
        Toast.success(res.msg);
        this.$router.push({
          name: "User",
        });
      } else {
        Toast.fail("修改信息失败");
      }
    },
    formatter(time) {
      const year = time.getFullYear();
      const month = time.getMonth() + 1;
      const day = time.getDate();
      return year + "年" + month + "月" + day + "日";
    },
    onConfirm(time) {
      //   console.log(time);
      //   console.log(this.formatter(time));
      this.birthday = this.formatter(time);
      this.showPicker = false;
    },
    onConfirmArea(area) {
      //   console.log(area);
      var areaStr = "";
      area.forEach((item) => {
        areaStr += item.name;
      });
      //   console.log(areaStr);
      this.area = areaStr;
      this.showArea = false;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style>
.modify {
  background: #fff;
}
</style>